<template>
    <div class="shadow-lg p-4 rounded-lg mx-4 bg-white flex flex-col Code">
        <span class="flex flex-row items-center">
            <span
                class="
                    cursor-pointer
                    h-3
                    w-3
                    rounded-full
                    cursor-none
                    bg-red-500
                    mx-1
                "
                @click="$emit('close')"
            ></span>
            <span
                class="
                    cursor-pointer
                    h-3
                    w-3
                    rounded-full
                    cursor-none
                    bg-yellow-500
                    mx-1
                "
            ></span>
            <span
                class="
                    cursor-pointer
                    h-3
                    w-3
                    rounded-full
                    cursor-none
                    bg-green-500
                    mx-1
                "
            ></span>
            <span
                class="
                    flex-grow
                    text-center
                    opacity-0
                    hover:opacity-100
                    transition
                    cursor-default
                "
                >{{ lang }}</span
            >
            <span
                class="
                    Icon
                    cursor-pointer
                    text-blue-500
                    transition
                    hover:bg-gray-300
                    w-8
                    h-8
                    rounded
                    flex flex-row
                    justify-center
                    items-center
                "
                @click="copy"
                >assignment</span
            >
        </span>
        <div class="overflow-scroll flex-grow flex flex-col p-4">
            <code class="block whitespace-pre-wrap" v-html="domString"></code>
        </div>
    </div>
</template>

<script>
import copy from "@/utils/copy.js";
export default {
    props: {
        code: {
            type: String,
        },
        lang: {
            type: String,
            default: "javascript",
        },
    },
    watch: {
        code() {
            this.highlight();
        },
    },
    mounted() {
        this.highlight();
    },
    methods: {
        async highlight() {
            const hl = await window.Preload.getHighlight();
            let code = this.code;
            try {
                const prettier = await window.Preload.getPrettier();
                await prettier.loadLanguage(this.lang);
                code = await prettier.format(this.code, this.lang);
                console.log({ code }, this.code);
            } catch (err) {
                console.error("格式化错误", err);
            }

            this.domString = await hl.highlight(code, this.lang);
        },
        copy() {
            copy(this.code).then(() => console.info("复制代码成功"));
        },
    },
    data() {
        return {
            domString: "",
        };
    },
};
</script>

<style scoped>
@import url(https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/styles/github.min.css);

::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
}
::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    background-clip: padding-box;
    min-height: 28px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
</style>
